<template>
	<view>
		 <!-- #ifdef MP-WEIXIN -->
		<navbar  title="收货地址" :isGoBack="true" :isNotice="true" :visible="true" :bgColor="bgColor" :btnColors='btnColor' ></navbar>
		<!-- #endif -->	
		
		<view style="display: flex;width: 100%;height: 600rpx" class="flex justify-center align-center text-center" v-if="list.length == 0">
			<u-empty  mode="address"> </u-empty>
		</view>
		
		<view class="flex flex-direction" style="padding-bottom: 150rpx;">
			<view class='pt-20 ml-20 mr-20'  v-for="(item,index) in list" :key="index" style="border-radius: 16rpx ">
			    <view class="mb-10"  @longpress="handleOperate" :data-item="item">
					<view class='t-cell  border-b pt-30 pb-30 pl-25' style="border-radius: 16rpx ">
					   <view class="flex flex-direction" slot='content' style="width: 100%;">
						   <view class="default_img" v-if="item.is_default==1" style="width: 104rpx;height: 42rpx;background: #36B3E9;border-radius: 0rpx 0rpx 0rpx 16rpx;">
							  <view class="default_text pr-20 pt-5" style="font-size: 24rpx;">
								默认
							  </view>
							<!--  <image src="../../../static/resource/default.png" style="width: 88.55rpx;height: 42.67rpx;"></image>		 -->			   								
						   </view>
							<view class='flex align-center cell text-lg'>
								<view class="text-lg ellipsis">
								     <text class="title-name">{{item.realname}}</text>							
								     <text style="color: #222222;" class="ml-20">{{item.phone}}</text>
								</view>
							</view>
							  <view class="text-sm mt-15 address" style="padding-bottom: 20rpx;">{{item.province}}{{item.city}}{{item.region}}{{item.address}}</view>
							  <view class="flex justify-end mt-15">							 
								  <view class="flex">
									  <view class="flex ml-20 mr-20 button-border align-center text-center justify-center" style="font-size: 28rpx; width: 154rpx" @click="handleDel(item)">
									  									
									  	<text  size="22">删除</text>								 	
									  </view>
								  	 <view class="flex button-border mr-20 align-center text-center justify-center" style="font-size: 28rpx;  border: 1rpx solid #36B3E9;color: #36B3E9; width: 154rpx;" @click="handleEdit(item)">
										<!-- <u-icon name="edit-pen" ></u-icon> -->
								  	 	<text  size="22">编辑</text>									
								  	 </view>
									
								  </view>							
							  </view>						  
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="about-button" style="background-color: #ffffff">
			<view class="ml-15">				
				<navigator open-type="navigate" url="./add-edit/index?type=c">					
				<button class="about-button-alipay" style="background:#36B3E9;border: none;color: #ffffff;height: 88rpx;text-align: center;line-height: 88rpx;">
					
					<view class=" ml-10">
						新增地址
					</view>
					</button>
				</navigator>
			</view>			
		</view>	
	</view>
</template>

<script>
	export default {
		data () {
			return {
				...getApp().globalData.config,
				username:"",
				list:{},
				radiovalue:780
			}			
		},
		onLoad(){		
		    this.queryList()	
		},


		methods:{
			...getApp().globalData.function,	
		    //修改默认地址
			handleDefault(item){
				this.$http.AddressDefault({
					id:item.id,
					token:uni.getStorageSync('userInfo').token,
					login_type:'app',
					}).then(res=>{
					if(res.resCode=='9999'){
						this.queryList();
					}
				})			   
			},
			//获取地址信息
			queryList(){
				this.$http.AddressList({
					token:uni.getStorageSync('userInfo').token,
					login_type:'app',
					}).then(res=>{
				  if(res.resCode=='9999'){
				    this.list=res.data.list
					this.radiovalue=res.data.radiovalue
				    
				  }
				})	
			},
			//获取支付宝地址
			getUserAddress() {
				let that =this;
			      my.getAddress({
			        success: (res) => {
						if(res.resultStatus=='9000'){
							let formData={
								linkname:res.result.fullname,
								phone:res.result.mobilePhone,
								province:res.result.prov,
								city:res.result.city,
								area:res.result.area,
								address:res.result.address,
								token:uni.getStorageSync('userInfo').token,
								login_type:'app',
								is_default:1,
							}
							that.$http.PostAddress(formData).then(res=>{
								if(res.resCode=='9999'){
								    that.$showToast(res.resMessage)						
									that.list=[]						  
									setTimeout(function(){
									   that.queryList()	
									}, 1500)
								}else{
								    that.$showToast(res.resMessage)
								    return false	
								}  
							})	
						}
			          console.log('用户地址:', res.result);
			          // 处理获取到的地址信息
			        },
			        fail: (err) => {
			          console.log('获取地址失败:', err);
			          // 处理错误情况
			        }
			      });
			},
			//删除地址
			handleDel(item){	
				let that=this			
				uni.showModal({content: '确定删除地址吗？'}).then(res=>{			
				  if(res.confirm){
					this.$http.Addressdel({
						token:uni.getStorageSync('userInfo').token,
						ids:item.id,
					}).then(res=>{
						if(res.resCode=='9999'){
						  uni.showToast({title:res.resMessage,icon:'none'})
						  setTimeout(()=>{
							  this.queryList();
						  },2000)          
						  return
						}else{
						  uni.showToast(res.resMessage)
						}
					})       
				  }
				})
			},
			//编辑	
			handleEdit(item){
				uni.navigateTo({
					url:"/pages/pagesuser/address/add-edit/index?type=u&item="+JSON.stringify(item)
				})
			},
			handleOperate(e){
				this.$showActionSheet(["编辑", "删除"]).then(res => {
					if (res.errMsg == "showActionSheet:ok") {
						if (res.tapIndex === 0) {
							let item=e.currentTarget.dataset.item
							// console.log(item)
							uni.navigateTo({
								url:"/pages/pagesuser/address/add-edit/index?type=u&item="+JSON.stringify(item)
							})
						}else{
							let item=e.currentTarget.dataset.item
							this.$http.Addressdel({
								token:uni.getStorageSync('userInfo').token,
								ids:item.id,
								}).then(res=>{
								this.$showToast(res.resMessage)
									for(var i=0;i<this.list.length;i++){
										if(item.id==this.list[i].id){
											this.list.splice(i,1)
										}
									}											
						    })
						}
					}
				})
			}
		}
	}
</script>

<style>
	page{
		background: #F0F9FE;
	}
	.button-border{
		padding: 15rpx 20rpx;
		border-radius: 40rpx;
		border: 1rpx solid #999999
	}
	.default_text{
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		font-size: 29rpx;
		color: #FFFFFF;
	}
	.default_img{
		position: absolute;
		top: 0rpx;
		right: 0rpx;
	}
	.address{
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
	}
	.title-name{
		font-weight: 800;
		font-size: 33rpx;
		color: #000000;
	}
	.about-button{		
		display: flex;
		flex-direction: row;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 50%;
		width: 100%;
		transform: translateX(-50%);
		padding-bottom: 40rpx;
		padding-top: 20rpx;
		font-size: 28rpx;
		line-height: 80rpx;
		height: 80rpx;
		color: #FFFFFF;
		 border: none !important;
	}
	
	.about-button-alipay{
		display: flex;
		justify-content: center;
		width: 620rpx;
		font-size: 28rpx;
		color: #031F37;
		border: none !important;
		border-radius: 40rpx;
		
	}
	
	button::after {
	    border: none;
	}
	
	.about-button:active{
	  opacity: 0.5;
	}
	.button-address{
		width: 160rpx;
		
	}
	/* component/list-group-item/index.wxss */
	.t-cell {
	  position: relative;
	  padding: 20rpx 0;
	  display: flex;
	  background: #fff;
	  color: #495060;
	  align-items: center;
	  line-height: 1.4;
	  font-size: 28rpx;
	  overflow: hidden;
	  text-align: left;
	  border-radius: 0;
	  justify-content: space-between;
	}
	
	.t-cell::after {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 200%;
	  height: 200%;
	  transform: scale(0.5);
	  transform-origin: 0 0;
	  pointer-events: none;
	  box-sizing: border-box;
	  border: 0 solid #e9eaec;
	  border-bottom-width: 1px;
	  left: 20rpx;
	  right: 0;
	}
	
	.t-cell-last::after {
	  display: none;
	}
	
	.t-border{
	  border-bottom: 1rpx solid #f0f0f0 !important;
	}
	
	.t-cell-icon {
	  margin-right: 10rpx;
	  display:flex;
	  align-items:center;
	}
	
	.t-cell-icon:empty {
	  display: none;
	}
	
	.t-cell-icon .t-cell-icon-image{
	  width: 48rpx;
	  height: 48rpx;
	  border-radius: 50%;
	}
	
	.t-cell-bd {
	  flex: 1;
	}
	
	.t-cell-text {
	  line-height: 48rpx;
	  font-size: 28rpx;
	  color: #495060;
	  min-width: 150rpx;
	}
	
	.t-cell-desc {
	  line-height: 1.2;
	  font-size: 24rpx;
	  color: #80848f;
	}
	
	.t-cell-ft {
	  position: relative;
	  display: flex;
	  align-items: center;
	  text-align: right;
	  vertical-align: center;
	  color: #495060;
	  line-height: 48rpx;
	  max-width: 500rpx;
	  white-space: pre-wrap;
	  flex-wrap: wrap;
	  word-break: break-all;
	
	}
	
	.t-cell-access .t-cell-ft {
	  padding-right: 20rpx;
	  color: #888888;
	}
	
	.t-cell-access .t-cell-ft::after {
	  content: " ";
	  display: inline-block;
	  width: 15rpx;
	  height: 15rpx;
	  position: absolute;
	  top: 50%;
	  right: -10rpx;
	  border-width: 4rpx 4rpx 0 0;
	  border-color: #2d8cf0;
	  border-style: solid;
	  transform: translateY(-50%) matrix(0.71, 0.71, -.71, 0.71, 0, 0);
	}
	
	.t-required{
	  display: flex;
	  align-items: center;
	  color: red;
	  padding-top: 10rpx;
	  width: 25rpx;
	}

</style>